```jsx
import * as {{component}} from "@zag-js/{{component}}"
import { useMachine, normalizeProps } from "@zag-js/solid"
import { createMemo, createUniqueId } from "solid-js"

function {{titleCase component}}() {
  const service = useMachine({{component}}.machine({ id: createUniqueId() }))

  const api = createMemo(() => {{component}}.connect(service, normalizeProps))

  return (
    <div {...api().getRootProps()}>
      <div {...api().getControlProps()}>...</div>
    </div>
  )
}
```
